<%--
  Created by IntelliJ IDEA.
  User: JYC
  Date: 2022/4/18
  Time: 20:53:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table class="easyui-datagrid" id="use_dg">
</table>

<%--datagrid控件工具栏--%>
<div id="use_toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
       plain="true" onclick="newUse()">添加用户</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"
       plain="true" onclick="editUse()">修改用户</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"
       plain="true" onclick="destroyUse()">删除用户</a>
</div>
<div id="use_menu_dlg" class="easyui-dialog" style="width:400px;height: 400px;"
     data-options="closed:true,modal:true,border:'thin',buttons:'#use_dlg-buttons'">
    <div id="useMenuTree" class="ztree"></div>
</div>
<%--对话框按钮--%>
<div id="use_dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok"
       onclick="saveUser2()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#user_dlg').dialog('close')" style="width:90px">关闭</a>
</div>
<%--添加用户话框--%>
<div id="user_dlg" class="easyui-dialog" style="width:400px;height: 440px;"
     data-options="closed:true,modal:true,border:'thin',buttons:'#use_dlg-buttons'">
    <form id="user_fm" method="post" novalidate style="margin:0;padding:20px 50px">

        <div style="margin-bottom:10px">
            <input name="loginname" class="easyui-textbox" required="true" label="登录名:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="identity" class="easyui-textbox" required="true"
                   label="身份证号:" style="width:100%" id="identity">
        </div>
        <div style="margin-bottom:10px">
            <input name="realname" class="easyui-textbox" required="true" label="真实姓名:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <select class="easyui-combobox" name="sex" label="用户性别" style="width:100%">
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </div>
        <div style="margin-bottom:10px">
            <input name="phone" class="easyui-textbox" required="true" label="用户电话:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="address" class="easyui-textbox" required="true" label="用户地址:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <%--下拉列表框中的数据是从数据库查询获得
            url：给后台发送请求的路径，获得角色的json对象集合
            valueField ：指定json对象中下拉列表框value需要的数据的key
            textField： 指定json的key，使用该key解析json，填充下拉列表框的option中的数据
            --%>
            <input id="cc" class="easyui-combobox" name="rids"
                   data-options="valueField:'roleid',textField:'rolename',url:'rolelist'"
                   label="用户角色:" style="width:100%" multiple="multiple">
        </div>
    </form>
</div>
<script type="text/javascript">
    /*定义加载事件*/
    $(function () {
        loadUserList();
    });

    /*加载车辆列表信息*/
    function loadUserList() {
        $("#use_dg").datagrid({
            url: "getUsers",
            singleSelect: true,
            fitColumns: true,
            fit: true,
            pagination: true,
            rownumbers: true,
            title: '角色列表',
            iconCls: 'icon-ok',
            toolbar: "#use_toolbar",
            columns: [[
                {field: 'userid', title: '用户编号', width: 100},
                {field: 'loginname', title: '登录名称', width: 100},
                {field: 'identity', title: '证件号码', width: 120},
                {field: 'realname', title: '真是姓名', width: 120},
                {
                    field: 'sex', title: '用户性别', width: 80, formatter: function (val) {
                        return val == '1' ? '男' : '女'
                    }
                },
                {field: 'address', title: '用户地址', width: 120},
                {field: 'phone', title: '手机号码', width: 120},
                {field: 'pwd', title: '用户密码', width: 120},
                {field: 'position', title: '用户备注', width: 200, align: 'right'}
            ]]
        });
    }

    function newUse() {
        $("#user_dlg").dialog("open").dialog("setTitle", "添加用户");
        //清空表单
        $("#user_fm").form("clear");
        //指定处理添加用户请求的url
        url = "addUser";
    }

    function saveUser2() {
        $("#user_fm").form("submit", {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                //将result解析为json对象
                result = JSON.parse(result);
                if (result.errorMsg) {
                    //有错误发生
                    $.messager.show({
                        title: '提示',
                        msg: result.errorMsg
                    });
                } else {
                    //关闭对话框
                    $("#user_dlg").dialog("close");
                    //刷新datagrid
                    $("#use_dg").datagrid("reload");
                }
            }
        });
    }

    function editUse() {
        var row = $("#use_dg").datagrid("getSelected");
        if (row) {
            $("#user_dlg").dialog("open").dialog("setTitle", "更新用户");
            //form表单中回显数据
            $("#user_fm").form("load", row);
            //发送ajax请求，根据用户id，获得用户角色rid集合
            $.post("qrtURoles", "uid=" + row.userid, function (result) {
                //[3,4]
                $('#cc').combobox('setValues', result);
            });
            url = "updUser?userid=" + row.userid;
        }
    }

    function destroyUse() {
        var row = $("#use_dg").datagrid("getSelected");
        $.post("delUser", "uid=" + row.userid, function (result) {
            if (result.errorMsg) {
                //有错误发生
                $.messager.show({
                    title: '提示',
                    msg: result.errorMsg
                });
            } else {
                //刷新datagrid
                $("#use_dg").datagrid("reload");
            }
        }, 'json');
    }
</script>
</body>
</html>
